<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选/反选</title>
	</head>
	<body>
		<p><input type="checkbox" id="all"/>全选</p>
		<hr />
		<p><input type="checkbox" class="box"/>电脑</p>
		<p><input type="checkbox" class="box"/>手机</p>
		<p><input type="checkbox" class="box"/>空调</p>
		<script type="text/javascript">
			var all=document.getElementById('all');
			var box=document.getElementsByClassName('box');
			//全选框添加点击事件
		//	all.onclick=function(){
		//		for(var i=0;i<box.length;i++){
					/*all.checked=true;
					box[i].checked=true;*/
					//方式1：
					//box[i].checked=all.checked;
					//方式2：
		//			box[i].checked=event.target.checked;
		//		}
		//	}
			//事件监听式：点击all 执行myfun这个函数
			all.addEventListener('click',myfun,false);
			
			function myfun(){
				for(var i=0;i<box.length;i++){
					box[i].checked=event.target.checked;
				}
			}
		</script>
	</body>
</html>
